<template>
  <div class="home">
    <van-row justify="space-between">
      <van-col span="6" @click="crollDay(1)">
        <span class="home-tip">前一年</span>
      </van-col>
      <van-col span="12" class="time-con" @click="showCalendar">
        <span class="home-time">{{ time }}</span>
        <van-icon name="calendar-o" color="#485187" size="16" />
      </van-col>
      <van-col span="6" @click="crollDay(0)">
        <span class="home-tip">后一年</span></van-col
      >
    </van-row>
    <div class="home-main">
      <van-row class="home-title">
        <span>{{ time }}年人才流动情况</span>
      </van-row>
      <van-row>
        <div id="main1" style="width: 100%; height: 180px"></div>
      </van-row>
      <van-row class="home-title">
        <span>{{ time }}年各部门人数情况</span>
      </van-row>
      <van-row>
        <div id="main2" style="width: 100%; height: 200px"></div>
      </van-row>
      <van-row>
        <div id="main3" class="charts"></div>
      </van-row>
      <van-row class="home-title">
        <span>总量分析</span>
      </van-row>
      <van-row justify="space-between">
        <van-col span="5" class="item item1">
          <div class="item-tiltle">人数总量</div>
          <div>{{ exist }}</div>
        </van-col>
        <van-col span="5" class="item item2">
          <div class="item-tiltle">增长率</div>
          <div>{{ rate }}</div>
        </van-col>
        <van-col span="5" class="item item3">
          <div class="item-tiltle">新进人员</div>
          <div>{{ news }}</div>
        </van-col>
        <van-col span="5" class="item item4">
          <div class="item-tiltle">流出人数</div>
          <div>{{ drain }}</div>
        </van-col>
      </van-row>
      <van-row>
        <!-- <mytable></mytable> -->
      </van-row>
    </div>
    <van-picker
      title="请选择年份"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      :default-index="activeIndex"
      v-show="show"
    />
  </div>
</template>
<script>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";
import * as echarts from "echarts"; //引入图表库
import timeUtil from "../../utils/timeUtil.js";
// import mytable from "../../components/table.vue";
export default {
  name: "home",
  components: {},
  setup() {
    //获取实例 使用全局挂载
    const { proxy } = getCurrentInstance();
    const nowTime = new Date();
    const data = reactive({
      timeDate: nowTime,
      time: "2012",
      minDate: new Date(2010, 1, 1),
      maxDate: new Date(2019, 12, 30),
      // 指定图表的配置项和数据
      optionData1: [],
      optionData2: [],
      types: [], //部门
      exist: 2438,
      rate: "34.82%",
      news: 849,
      drain: 814,
      columns: ["2018", "2017", "2016", "2015", "2014", "2013", "2012", "2011", "2010"], //选择年份
      activeIndex: 0, //选择器默认选中下标
    });
    //是否显示选择器
    const show = ref(false);
    //确定时间
    const onConfirm = (values) => {
      show.value = false;
      data.time = values;
      data.activeIndex = data.columns.indexOf(values);
      dataInit2();
    };
    //显示日历
    const showCalendar = () => {
      show.value = true;
    };
    //取消选择
    const onCancel = () => {
      show.value = false;
    };
    //选择改变
    //前一年后一年
    const crollDay = (val) => {
      data.activeIndex = data.columns.indexOf(data.time);
      switch (val) {
        case 0:
          //后一年
          if (data.activeIndex != 0) {
            data.activeIndex -= 1;
            data.time = data.columns[data.activeIndex];
          }
          break;
        case 1:
          //前一年
          if (data.activeIndex != data.columns.length - 1) {
            data.activeIndex += 1;
            data.time = data.columns[data.activeIndex];
          }
          break;
        default:
          break;
      }
      dataInit2();
    };
    const echartInit = () => {
      //饼图
      var myChart1 = echarts.init(document.getElementById("main1"));
      //柱状图
      var myChart2 = echarts.init(document.getElementById("main2"));

      var myChart3 = echarts.init(document.getElementById("main3"));
      let option1 = {
        title: {
          text: "员工离职原因统计",
          left: "center",
          textStyle: {
            color: "#485187",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          bottom: 0,
          textStyle: {
            color: "#485187",
          },
        },
        // legend: {
        //   top: "2%",
        //   left: "center",
        // },
        series: [
          {
            name: "离职原因",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data.optionData1,
          },
        ],
      };
      let option2 = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: data.types,
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 45, //60度角倾斜显示
          },
          name: "部门",
        },
        yAxis: {
          type: "value",
          name: "人数",
        },
        series: [
          {
            data: data.optionData2,
            type: "bar",
          },
        ],
      };
      let option3 = {
        title: {
          text: "男女年龄数量分布",
          textStyle: {
            color: "#485187",
            fontSize: "14",
          },
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "7%",
          containLabel: true,
        },
        tooltip: {
          // trigger: 'axis',
          showDelay: 0,
          formatter: function (params) {
            if (params.value.length > 1) {
              return (
                params.seriesName +
                " :<br/>" +
                params.value[0] +
                "" +
                params.value[1] +
                "岁"
              );
            } else {
              return (
                params.seriesName + " :<br/>" + params.name + " : " + params.value + "岁"
              );
            }
          },
          axisPointer: {
            show: true,
            type: "cross",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
          },
        },
        legend: {
          data: ["Female", "Male"],
          left: "center",
          bottom: 10,
        },
        xAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false,
            },
            name: "人数",
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false,
            },
            name: "年龄",
          },
        ],
        series: [
          {
            name: "Female",
            type: "scatter",
            emphasis: {
              focus: "series",
            },
            data: [
              [161.2, 51.6],
              [167.5, 59.0],
              [159.5, 49.2],
              [157.0, 63.0],
              [155.8, 53.6],
              [170.0, 59.0],
              [159.1, 47.6],
              [166.0, 69.8],
              [176.2, 66.8],
              [160.2, 75.2],
              [172.5, 55.2],
              [170.9, 54.2],
              [172.9, 62.5],
              [153.4, 42.0],
              [160.0, 50.0],
              [147.2, 49.8],
              [168.2, 49.2],
              [175.0, 73.2],
              [157.0, 47.8],
              [167.6, 68.8],
              [159.5, 50.6],
              [175.0, 82.5],
              [166.8, 57.2],
              [176.5, 87.8],
              [170.2, 72.8],
              [174.0, 54.5],
              [173.0, 59.8],
              [179.9, 67.3],
              [170.5, 67.8],
              [160.0, 47.0],
              [154.4, 46.2],
              [162.0, 55.0],
              [176.5, 83.0],
              [160.0, 54.4],
              [152.0, 45.8],
              [162.1, 53.6],
              [170.0, 73.2],
              [160.2, 52.1],
              [161.3, 67.9],
              [166.4, 56.6],
              [168.9, 62.3],
              [163.8, 58.5],
              [167.6, 54.5],
              [160.0, 50.2],
              [161.3, 60.3],
              [167.6, 58.3],
              [165.1, 56.2],
              [160.0, 50.2],
              [170.0, 72.9],
              [157.5, 59.8],
              [167.6, 61.0],
              [160.7, 69.1],
              [163.2, 55.9],
              [152.4, 46.5],
              [157.5, 54.3],
              [168.3, 54.8],
              [180.3, 60.7],
              [165.5, 60.0],
              [165.0, 62.0],
              [164.5, 60.3],
              [156.0, 52.7],
              [160.0, 74.3],
              [163.0, 62.0],
              [165.7, 73.1],
              [161.0, 80.0],
              [162.0, 54.7],
              [166.0, 53.2],
              [174.0, 75.7],
              [172.7, 61.1],
              [167.6, 55.7],
              [151.1, 48.7],
              [164.5, 52.3],
              [163.5, 50.0],
              [152.0, 59.3],
              [169.0, 62.5],
              [164.0, 55.7],
              [161.2, 54.8],
              [155.0, 45.9],
              [170.0, 70.6],
              [176.2, 67.2],
              [170.0, 69.4],
              [162.5, 58.2],
              [170.3, 64.8],
              [164.1, 71.6],
              [169.5, 52.8],
              [163.2, 59.8],
              [154.5, 49.0],
              [159.8, 50.0],
              [173.2, 69.2],
              [170.0, 55.9],
              [161.4, 63.4],
              [169.0, 58.2],
              [166.2, 58.6],
              [159.4, 45.7],
              [162.5, 52.2],
              [159.0, 48.6],
              [162.8, 57.8],
              [159.0, 55.6],
              [179.8, 66.8],
              [162.9, 59.4],
              [161.0, 53.6],
              [151.1, 73.2],
              [168.2, 53.4],
              [168.9, 69.0],
              [173.2, 58.4],
              [171.8, 56.2],
              [178.0, 70.6],
              [164.3, 59.8],
              [163.0, 72.0],
              [168.5, 65.2],
              [166.8, 56.6],
              [172.7, 105.2],
              [163.5, 51.8],
              [169.4, 63.4],
              [167.8, 59.0],
              [159.5, 47.6],
              [167.6, 63.0],
              [161.2, 55.2],
              [160.0, 45.0],
              [163.2, 54.0],
              [162.2, 50.2],
              [161.3, 60.2],
              [149.5, 44.8],
              [157.5, 58.8],
              [163.2, 56.4],
              [172.7, 62.0],
              [155.0, 49.2],
              [156.5, 67.2],
              [164.0, 53.8],
              [160.9, 54.4],
              [162.8, 58.0],
              [167.0, 59.8],
              [160.0, 54.8],
              [160.0, 43.2],
              [168.9, 60.5],
              [158.2, 46.4],
              [156.0, 64.4],
              [160.0, 48.8],
              [167.1, 62.2],
              [158.0, 55.5],
              [167.6, 57.8],
              [156.0, 54.6],
              [162.1, 59.2],
              [173.4, 52.7],
              [159.8, 53.2],
              [170.5, 64.5],
              [159.2, 51.8],
              [157.5, 56.0],
              [161.3, 63.6],
              [162.6, 63.2],
              [160.0, 59.5],
              [168.9, 56.8],
              [165.1, 64.1],
              [162.6, 50.0],
              [165.1, 72.3],
              [166.4, 55.0],
              [160.0, 55.9],
              [152.4, 60.4],
              [170.2, 69.1],
              [162.6, 84.5],
              [170.2, 55.9],
              [158.8, 55.5],
              [172.7, 69.5],
              [167.6, 76.4],
              [162.6, 61.4],
              [167.6, 65.9],
              [156.2, 58.6],
              [175.2, 66.8],
              [172.1, 56.6],
              [162.6, 58.6],
              [160.0, 55.9],
              [165.1, 59.1],
              [182.9, 81.8],
              [166.4, 70.7],
              [165.1, 56.8],
              [177.8, 60.0],
              [165.1, 58.2],
              [175.3, 72.7],
              [154.9, 54.1],
              [158.8, 49.1],
              [172.7, 75.9],
              [168.9, 55.0],
              [161.3, 57.3],
              [167.6, 55.0],
              [165.1, 65.5],
              [175.3, 65.5],
              [157.5, 48.6],
              [163.8, 58.6],
              [167.6, 63.6],
              [165.1, 55.2],
              [165.1, 62.7],
              [168.9, 56.6],
              [162.6, 53.9],
              [164.5, 63.2],
              [176.5, 73.6],
              [168.9, 62.0],
              [175.3, 63.6],
              [159.4, 53.2],
              [160.0, 53.4],
              [170.2, 55.0],
              [162.6, 70.5],
              [167.6, 54.5],
              [162.6, 54.5],
              [160.7, 55.9],
              [160.0, 59.0],
              [157.5, 63.6],
              [162.6, 54.5],
              [152.4, 47.3],
              [170.2, 67.7],
              [165.1, 80.9],
              [172.7, 70.5],
              [165.1, 60.9],
              [170.2, 63.6],
              [170.2, 54.5],
              [170.2, 59.1],
              [161.3, 70.5],
              [167.6, 52.7],
              [167.6, 62.7],
              [165.1, 86.3],
              [162.6, 66.4],
              [152.4, 67.3],
              [168.9, 63.0],
              [170.2, 73.6],
              [175.2, 62.3],
              [175.2, 57.7],
              [160.0, 55.4],
              [165.1, 104.1],
              [174.0, 55.5],
              [170.2, 77.3],
              [160.0, 80.5],
              [167.6, 64.5],
              [167.6, 72.3],
              [167.6, 61.4],
              [154.9, 58.2],
              [162.6, 81.8],
              [175.3, 63.6],
              [171.4, 53.4],
              [157.5, 54.5],
              [165.1, 53.6],
              [160.0, 60.0],
              [174.0, 73.6],
              [162.6, 61.4],
              [174.0, 55.5],
              [162.6, 63.6],
              [161.3, 60.9],
              [156.2, 60.0],
              [149.9, 46.8],
              [169.5, 57.3],
              [160.0, 64.1],
              [175.3, 63.6],
              [169.5, 67.3],
              [160.0, 75.5],
              [172.7, 68.2],
              [162.6, 61.4],
              [157.5, 76.8],
              [176.5, 71.8],
              [164.4, 55.5],
              [160.7, 48.6],
              [174.0, 66.4],
              [163.8, 67.3],
            ],
            markArea: {
              silent: true,
              itemStyle: {
                color: "transparent",
                borderWidth: 1,
                borderType: "dashed",
              },
              data: [
                [
                  {
                    name: "Female Data Range",
                    xAxis: "min",
                    yAxis: "min",
                  },
                  {
                    xAxis: "max",
                    yAxis: "max",
                  },
                ],
              ],
            },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              lineStyle: {
                type: "solid",
              },
              data: [{ type: "average", name: "平均值" }, { xAxis: 160 }],
            },
          },
          {
            name: "Male",
            type: "scatter",
            emphasis: {
              focus: "series",
            },
            data: [
              [174.0, 65.6],
              [175.3, 71.8],
              [193.5, 80.7],
              [186.5, 72.6],
              [187.2, 78.8],
              [181.5, 74.8],
              [184.0, 86.4],
              [184.5, 78.4],
              [175.0, 62.0],
              [184.0, 81.6],
              [180.0, 76.6],
              [177.8, 83.6],
              [192.0, 90.0],
              [176.0, 74.6],
              [174.0, 71.0],
              [184.0, 79.6],
              [192.7, 93.8],
              [171.5, 70.0],
              [173.0, 72.4],
              [176.0, 85.9],
              [176.0, 78.8],
              [180.5, 77.8],
              [172.7, 66.2],
              [176.0, 86.4],
              [173.5, 81.8],
              [178.0, 89.6],
              [180.3, 82.8],
              [180.3, 76.4],
              [164.5, 63.2],
              [173.0, 60.9],
              [183.5, 74.8],
              [175.5, 70.0],
              [188.0, 72.4],
              [189.2, 84.1],
              [172.8, 69.1],
              [170.0, 59.5],
              [182.0, 67.2],
              [170.0, 61.3],
              [177.8, 68.6],
              [184.2, 80.1],
              [186.7, 87.8],
              [171.4, 84.7],
              [172.7, 73.4],
              [175.3, 72.1],
              [180.3, 82.6],
              [182.9, 88.7],
              [188.0, 84.1],
              [177.2, 94.1],
              [172.1, 74.9],
              [167.0, 59.1],
              [169.5, 75.6],
              [174.0, 86.2],
              [172.7, 75.3],
              [182.2, 87.1],
              [164.1, 55.2],
              [163.0, 57.0],
              [171.5, 61.4],
              [184.2, 76.8],
              [174.0, 86.8],
              [174.0, 72.2],
              [177.0, 71.6],
              [186.0, 84.8],
              [167.0, 68.2],
              [171.8, 66.1],
              [182.0, 72.0],
              [167.0, 64.6],
              [177.8, 74.8],
              [164.5, 70.0],
              [192.0, 101.6],
              [175.5, 63.2],
              [171.2, 79.1],
              [181.6, 78.9],
              [167.4, 67.7],
              [181.1, 66.0],
              [177.0, 68.2],
              [174.5, 63.9],
              [177.5, 72.0],
              [170.5, 56.8],
              [182.4, 74.5],
              [197.1, 90.9],
              [180.1, 93.0],
              [175.5, 80.9],
              [180.6, 72.7],
              [184.4, 68.0],
              [175.5, 70.9],
              [180.6, 72.5],
              [177.0, 72.5],
              [177.1, 83.4],
              [181.6, 75.5],
              [176.5, 73.0],
              [175.0, 70.2],
              [174.0, 73.4],
              [165.1, 70.5],
              [177.0, 68.9],
              [192.0, 102.3],
              [176.5, 68.4],
              [169.4, 65.9],
              [182.1, 75.7],
              [179.8, 84.5],
              [175.3, 87.7],
              [184.9, 86.4],
              [177.3, 73.2],
              [167.4, 53.9],
              [178.1, 72.0],
              [168.9, 55.5],
              [157.2, 58.4],
              [180.3, 83.2],
              [170.2, 72.7],
              [177.8, 64.1],
              [172.7, 72.3],
              [165.1, 65.0],
              [186.7, 86.4],
              [165.1, 65.0],
              [174.0, 88.6],
              [175.3, 84.1],
              [185.4, 66.8],
              [177.8, 75.5],
              [180.3, 93.2],
              [180.3, 82.7],
              [177.8, 58.0],
              [177.8, 79.5],
              [177.8, 78.6],
              [177.8, 71.8],
              [177.8, 116.4],
              [163.8, 72.2],
              [188.0, 83.6],
              [198.1, 85.5],
              [175.3, 90.9],
              [166.4, 85.9],
              [190.5, 89.1],
              [166.4, 75.0],
              [177.8, 77.7],
              [179.7, 86.4],
              [172.7, 90.9],
              [190.5, 73.6],
              [185.4, 76.4],
              [168.9, 69.1],
              [167.6, 84.5],
              [175.3, 64.5],
              [170.2, 69.1],
              [190.5, 108.6],
              [177.8, 86.4],
              [190.5, 80.9],
              [177.8, 87.7],
              [184.2, 94.5],
              [176.5, 80.2],
              [177.8, 72.0],
              [180.3, 71.4],
              [171.4, 72.7],
              [172.7, 84.1],
              [172.7, 76.8],
              [177.8, 63.6],
              [177.8, 80.9],
              [182.9, 80.9],
              [170.2, 85.5],
              [167.6, 68.6],
              [175.3, 67.7],
              [165.1, 66.4],
              [185.4, 102.3],
              [181.6, 70.5],
              [172.7, 95.9],
              [190.5, 84.1],
              [179.1, 87.3],
              [175.3, 71.8],
              [170.2, 65.9],
              [193.0, 95.9],
              [171.4, 91.4],
              [177.8, 81.8],
              [177.8, 96.8],
              [167.6, 69.1],
              [167.6, 82.7],
              [180.3, 75.5],
              [182.9, 79.5],
              [176.5, 73.6],
              [186.7, 91.8],
              [188.0, 84.1],
              [188.0, 85.9],
              [177.8, 81.8],
              [174.0, 82.5],
              [177.8, 80.5],
              [171.4, 70.0],
              [185.4, 81.8],
              [185.4, 84.1],
              [188.0, 90.5],
              [188.0, 91.4],
              [182.9, 89.1],
              [176.5, 85.0],
              [175.3, 69.1],
              [175.3, 73.6],
              [188.0, 80.5],
              [188.0, 82.7],
              [175.3, 86.4],
              [170.5, 67.7],
              [179.1, 92.7],
              [177.8, 93.6],
              [175.3, 70.9],
              [182.9, 75.0],
              [170.8, 93.2],
              [188.0, 93.2],
              [180.3, 77.7],
              [177.8, 61.4],
              [185.4, 94.1],
              [168.9, 75.0],
              [185.4, 83.6],
              [180.3, 85.5],
              [174.0, 73.9],
              [167.6, 66.8],
              [182.9, 87.3],
              [160.0, 72.3],
              [180.3, 88.6],
              [167.6, 75.5],
              [186.7, 101.4],
              [175.3, 91.1],
              [175.3, 67.3],
              [175.9, 77.7],
              [175.3, 81.8],
              [179.1, 75.5],
              [181.6, 84.5],
              [177.8, 76.6],
              [182.9, 85.0],
              [177.8, 102.5],
              [184.2, 77.3],
              [179.1, 71.8],
              [176.5, 87.9],
              [188.0, 94.3],
              [174.0, 70.9],
              [167.6, 64.5],
              [170.2, 77.3],
              [167.6, 72.3],
              [188.0, 87.3],
              [174.0, 80.0],
              [176.5, 82.3],
              [180.3, 73.6],
              [167.6, 74.1],
              [188.0, 85.9],
              [180.3, 73.2],
              [167.6, 76.3],
              [183.0, 65.9],
              [183.0, 90.9],
              [179.1, 89.1],
              [170.2, 62.3],
              [177.8, 82.7],
              [179.1, 79.1],
              [190.5, 98.2],
              [177.8, 84.1],
              [180.3, 83.2],
              [180.3, 83.2],
            ],
            markArea: {
              silent: true,
              itemStyle: {
                color: "transparent",
                borderWidth: 1,
                borderType: "dashed",
              },
              data: [
                [
                  {
                    name: "Male Data Range",
                    xAxis: "min",
                    yAxis: "min",
                  },
                  {
                    xAxis: "max",
                    yAxis: "max",
                  },
                ],
              ],
            },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              lineStyle: {
                type: "solid",
              },
              data: [{ type: "average", name: "Average" }, { xAxis: 170 }],
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      // option1.series.data = JSON.parse(JSON.stringify());
      myChart1.setOption(option1);
      // option2.series.data = data.optionData2;
      myChart2.setOption(option2);
      myChart3.setOption(option3);
    };
    const dataInit1 = () => {
      //请求数据
      proxy.$api.getHomeCount().then((res) => {
        // console.log("rres", res);
        let obj = res.obj;
        data.drain = obj.drain;
        data.exist = obj.exist;
        data.news = obj.new;
        data.rate = obj.rate;
      });
    };
    const dataInit2 = () => {
      //请求数据
      let time = timeUtil.getTimeByYear(data.time);
      Promise.all([
        proxy.$api.getHomeFlow({ time }),
        proxy.$api.getHomeDeptNumber({ time }),
      ]).then((arr) => {
        data.optionData1 = arr[0].obj;
        let obj = arr[1].obj;
        data.optionData2 = obj.values;
        data.types = obj.types;
        echartInit();
      });
    };
    onMounted(() => {
      dataInit1();
      dataInit2();
    });
    return {
      ...toRefs(data),
      show,
      onConfirm,
      showCalendar,
      crollDay,
      echartInit,
      onCancel,
      dataInit1,
      dataInit2,
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  padding-top: 10px;
  height: 125vh;
  .van-picker {
    z-index: 100;
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  .home-main {
    padding: 0 10px;
  }
  .time-con {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home-time {
    margin-right: 5px;
  }
  .home-title {
    color: #fff;
    border-left: 1px solid #74e4f1;
    margin: 10px 0;
    span {
      margin-left: 5px;
      font-size: 14px;
    }
  }
  .item {
    border-radius: 5px;
    color: #fff;
  }
  .item-tiltle {
    text-align: left;
    font-size: 12px;
    margin: 2px;
  }
  .item1 {
    background-color: #8693f1;
  }
  .item2 {
    background-color: #fea897;
  }
  .item3 {
    background-color: #8ac4f5;
  }
  .item4 {
    background-color: #70cca3;
  }
}
</style>
